<template>
    <div class="tab">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" >
            <el-tab-pane label="请假申请" name="first" class="tab_pane_box">
                <iframe :src="url" frameborder="0" class="iframe"></iframe>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second" class="tab_pane_box">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third" class="tab_pane_box">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth" class="tab_pane_box">定时任务补偿</el-tab-pane>
        </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
        url : "http://www.baidu.com"
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    mounted() {
      
    }
  };
</script>
<style scoped>
    .tab {
        padding: 0 6px;
        overflow: auto;
    }
    .avue-view {
        height: 100%;
    }
    .el-tabs{
        height: 95%;
    }
    /deep/.el-tabs--border-card>.el-tabs__content {
        padding: 0;
    }
    /deep/.el-card__body {
        padding: 0;
    }
    .iframe {
        width: 100%;
        height: 100%;
        border: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    /deep/.el-tabs__content {
        height: 100%;
    }
    .tab_pane_box {
        height: 95%;
    }
</style>